<template>
  <a-col :span="theSpan" :md="theMd" :sm="theSm" :xs="theXs" :lg="theLg" :xl="theXl" :xxl="theXxl">
    <slot/>
  </a-col>
</template>
<script>
// import 'ant-design-vue/dist/antd.css'

export default {
  name: 'ZhCol',
  props: {
    span: Number,
    //≥768px
    md: {
      type: Number,
      default: 12
    },
    //≥576px
    sm: {
      type: Number,
      default: 24
    },
    //<576px
    xs: {
      type: Number,
      default: 24
    },
    //≥992px
    lg: {
      type: Number,
      default: 8
    },
    //≥1200px
    xl: {
      type: Number,
      default: 8
    },
    //≥1600px
    xxl: {
      type: Number,
      default: 6
    }
  },
  data() {
    return {
      theSpan: this.getSpan(),
      theMd: this.getMd(),
      theSm: this.getSm(),
      theXs: this.getXs(),
      theLg: this.getLg(),
      theXl: this.getXl(),
      theXxl: this.getXxl(),
      mySpan: null,
    }
  },
  created() {

  },
  methods: {
    getSpan(data) {
      if (this.span) {
        this.mySpan = this.span
        return this.span
      }
      let span = null;
      let parent = null;
      if (data) {
        parent = data.$parent;
      } else {
        parent = this.$parent;
      }
      if (parent) {
        span = parent.span

        if (span === null || span === undefined) {
          return this.getSpan(parent)
        } else {
          this.mySpan = span
          return span
        }

      } else {
        this.mySpan = undefined
        return undefined
      }
    },
    getMd(data) {
      if (this.mySpan) {
        return undefined
      } else {
        this.getSpan()
      }
      if (this.md) {
        return this.md
      }
      let md = null;
      let parent = null;
      if (data) {
        parent = data.$parent;
      } else {
        parent = this.$parent;
      }
      if (parent) {
        md = parent.md
        if (md === null || md === undefined) {
          return this.getMd(parent)
        } else {
          return md
        }

      } else {
        return undefined
      }
    },
    getSm(data) {
      if (this.mySpan) {
        return undefined
      } else {
        this.getSpan()
      }
      if (this.sm) {
        return this.sm
      }
      let sm = null;
      let parent = null;
      if (data) {
        parent = data.$parent;
      } else {
        parent = this.$parent;
      }
      if (parent) {
        sm = parent.sm
        if (sm === null || sm === undefined) {
          return this.getSm(parent)
        } else {
          return sm
        }

      } else {
        return undefined
      }
    },
    getXs(data) {
      if (this.mySpan) {
        return undefined
      } else {
        this.getSpan()
      }
      if (this.xs) {
        return this.xs
      }
      let xs = null;
      let parent = null;
      if (data) {
        parent = data.$parent;
      } else {
        parent = this.$parent;
      }
      if (parent) {
        xs = parent.xs
        if (xs === null || xs === undefined) {
          return this.getXs(parent)
        } else {
          return xs
        }

      } else {
        return undefined
      }
    },
    getLg(data) {
      if (this.mySpan) {
        return undefined
      } else {
        this.getSpan()
      }
      if (this.lg) {
        return this.lg
      }
      let lg = null;
      let parent = null;
      if (data) {
        parent = data.$parent;
      } else {
        parent = this.$parent;
      }
      if (parent) {
        lg = parent.lg
        if (lg === null || lg === undefined) {
          return this.getLg(parent)
        } else {
          return lg
        }

      } else {
        return undefined
      }
    },
    getXl(data) {
      if (this.mySpan) {
        return undefined
      } else {
        this.getSpan()
      }
      if (this.xl) {
        return this.xl
      }
      let xl = null;
      let parent = null;
      if (data) {
        parent = data.$parent;
      } else {
        parent = this.$parent;
      }
      if (parent) {
        xl = parent.xl
        if (xl === null || xl === undefined) {
          return this.getXl(parent)
        } else {
          return xl
        }

      } else {
        return undefined
      }
    },
    getXxl(data) {
      if (this.mySpan) {
        return undefined
      } else {
        this.getSpan()
      }
      if (this.xxl) {
        return this.xxl
      }
      let xxl = null;
      let parent = null;
      if (data) {
        parent = data.$parent;
      } else {
        parent = this.$parent;
      }
      if (parent) {
        xxl = parent.xxl
        if (xxl === null || xxl === undefined) {
          return this.getXxl(parent)
        } else {
          return xxl
        }

      } else {
        return undefined
      }
    },
  }
}
</script>
<style scoped lang="scss">

</style>